<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
		  <block slot="backText">返回</block>
		  <block slot="content">告警图表</block>
		</cu-custom>
		
		<view class="wrap">
			
			<!-- 查询系列 -->
			<view class="u-demo-area u-flex u-row-center u-m-p-50">
				<u-dropdown
				  :close-on-click-mask="mask"
				  ref="uDropdown"
				  :activeColor="activeColor"
				  :borderBottom="false"
				>
					<u-dropdown-item @change="change" title="状态" v-model="processStatus" :options="processStates"></u-dropdown-item>
					<u-dropdown-item @change="change" title="等级" v-model="level" :options="levels"></u-dropdown-item>
				</u-dropdown>
			</view>
				
			<view>
				<view class="u-flex u-flex-nowrap picker-border">
						<view
							@tap="calendarShow = true"
							class="u-m-l-40 u-font-30"
							style="margin-right: auto; justify-content: flex-start"
						>
							{{ startInput ? startInput : startNowTime }}
						</view>
						<view style="justify-content: center">-</view>
						<view
							@tap="calendarShow = true"
							class="u-m-r-40 u-font-30"
							style="margin-left: auto; justify-content: flex-end"
						>
							{{ endInput ? endInput : endNowTime }}
						</view>
					</view>
				
					<!-- 日历选择 -->
					<u-calendar
						v-model="calendarShow"
						mode="range"
						@change="calendarChange"
						active-bg-color="#19be6b"
						range-color="#19be6b"
						range-bg-color="rgba(25,190,107, 0.13)"
						btn-type="success"
						:default-start-date="startNowDate"
						:default-end-date="endNowDate"
					></u-calendar>
				</view>
					
				<!-- 饼状图 -->
				<view class="top">
					<view class="chartsMain">
						<canvas canvas-id="canvasPie" id="canvasPie" class="charts" @touchstart="touchPie"></canvas>
					</view>
				</view>
				
				<!-- 列表 -->
				<scroll-view scroll-y class="sv" :style="{ height: navHeight + 'px' }">
				  <view class="page-box">
						<uni-swipe-action>
						  <uni-swipe-action-item v-for="(item, index) in Pie.series" :key="item.name" :index="index">
						    <view class="order">
						      <view class="order-item">
						        <view class="left u-text-left">
						          <view class="title">{{ item.name }}</view>
						        </view>
						        <view class="right u-text-right">
						          <view class="expenditure-type">数量：{{ item.data }}个</view>
						        </view>
						      </view>
						    </view>
								<template v-slot:right>
								</template>
						  </uni-swipe-action-item>
						</uni-swipe-action>
					</view>
				</scroll-view>
			</view>
			
		</view>
	</view>
</template>

<script>
import store from '@/store';
// 图表
import uCharts from '@/components/u-charts/u-charts.js'
var _self
var canvaPie = null

export default {
	data() {
		return {
			activeColor: '#19be6b',
			mask: true,
			pH: 0, //窗口高度
			navHeight: 0, //元素的所需高度
			calendarShow: false,
			processStates: store.getters.alarmRecordProcessStatus,
			levels: store.getters.alarmRecordLevels,
			processStatus: 2,
			level: 1,
			startNowTime: '',
			endNowTime: '',
			startNowDate: '',
			endNowDate: '',
			startInput: '',
			endInput: '',
			cWidth: '',
			cHeight: '',
			pixelRatio: 1,
			// 饼状图
			Pie: {
			  series: []
			},
			// 折叠栏
			open: true,
			itemStyle: {
			  marginLeft: '40rpx',
			  marginRight: '20rpx'
			},
		}
	},
	onReady() {
	  // 动态获取剩余的高度
	  var that = this
	  uni.getSystemInfo({
	    success: function (res) {
	      that._data.pH = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
	      let titleH = uni.createSelectorQuery().select('.sv') //想要获取高度的元素名（class/id
	      titleH
	        .boundingClientRect((data) => {
	          let pH = that._data.pH
	          that._data.navHeight = pH - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
	        })
	        .exec()
	    }
	  })
	},
	onLoad() {
		_self = this
		this.cWidth = uni.upx2px(750)
		this.cHeight = uni.upx2px(520)
		this.getNowTime()
		this.getCount()
	},
	methods: {
		getServerData() {
		  _self.showPie('canvasPie', this.Pie)
		},
		showPie(canvasId, chartData) {
		  canvaPie = new uCharts({
		    $this: _self,
		    canvasId: canvasId,
		    type: 'pie',
		    fontSize: 11,
		    legend: true,
		    background: '#FFFFFF',
		    pixelRatio: _self.pixelRatio,
		    series: _self.Pie.series,
		    animation: true,
		    width: _self.cWidth * _self.pixelRatio,
		    height: _self.cHeight * _self.pixelRatio,
		    dataLabel: true,
		    extra: {
		      pie: {
		        lableWidth: 15
		      }
		    }
		  })
		},
		touchPie(e) {
		  canvaPie.showToolTip(e, {
		    format: function (item) {
		      return item.name + ':' + item.data
		    }
		  })
		},
		/**
		 * 获取当前 年月日
		 */
		async getNowTime() {
		  var dt = new Date()
		  let year = dt.getFullYear()
		  let month = (dt.getMonth() + 1 + '').padStart(2, '0')
		  let date = (dt.getDate() + '').padStart(2, '0')
		  this.startNowTime = `${year}-${month}-01 00:00:00`
		  this.endNowTime = `${year}-${month}-${date} 23:59:59`
		  this.startNowDate = `${year}-${month}-01`
		  this.endNowDate = `${year}-${month}-${date}`
		},
		/**
		 * 日历改变事件
		 * @param {Object} e
		 */
		calendarChange(e) {
		  this.startNowDate = e.startDate
		  this.endNowDate = e.endDate
		  this.startInput = e.startDate + ' 00:00:00'
		  this.endInput = e.endDate + ' 23:59:59'
		
		  this.change()
		},
		async getCount() {
			let startInput = this.startInput ? this.startInput : this.startNowTime
			let endInput = this.endInput ? this.endInput : this.endNowTime
			
			let params = {
			  processStatus: this.processStatus,
			  level: this.level,
			  startTime: startInput,
			  endTime: endInput
			}
			let res = await this.$u.api.getRecordCountByProcessStatus(params)
			let data = JSON.parse(JSON.stringify(res))
			if (data) {
			  this.Pie.series = []
			
			  // 组装数据
			  data.forEach((item) => {
			    let dat = {
			      name: item.name,
			      data: item.count
			    }
			
			    this.Pie.series.push(dat)
			  })
			
			  // 图表显示
			  this.getServerData()
			}
		},
		async change() {
			this.getCount()
		}
	}
}
</script>

<style lang="scss" scoped>

.top {
  margin: 20rpx 0;
  font-size: 25rpx;
}

.picker-border {
  background-color: #ffffff;
  margin: 0 auto;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;
  font-size: 28rpx;
}

.chartsMain {
  width: 750rpx;
  height: 550rpx;
  padding-top: 25rpx;
  background: #fff;
  margin-bottom: 24rpx;
  border-top: 2rpx solid #f2f2f2;
  .charts {
    width: 750rpx;
    height: 550rpx;
    box-sizing: border-box;
  }
}

.order {
  width: 710rpx;
  background-color: #ffffff;
  margin: 20rpx auto;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 10rpx;
  font-size: 28rpx;

  .order-item {
    display: flex;
    justify-content: space-between;

    .left {
      margin: 20rpx 0 20rpx 20rpx;

      .title {
        font-size: 35rpx;
        line-height: 45rpx;
      }
    }

    .right {
      margin: 20rpx 20rpx 20rpx 0;

      .expenditure-type {
        color: $u-type-error;
        font-size: 35rpx;
        line-height: 45rpx;
      }

      .income-type {
        color: $u-type-success;
        font-size: 35rpx;
        line-height: 45rpx;
      }
    }
  }
}
</style>
